import _ from 'lodash';
import type { GetStaticPropsContext, NextPage } from 'next';
import ReactMarkdown from 'react-markdown';
import Head from 'next/head';
import Emoji from '../Emoji';
import Image from '../Image';
import emojiPlugin from '../emojiPlugin';
import remarkGemoji from 'remark-gemoji';
import benzinConfig from '../config';
import Code from '../Code';
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';

const transformLinkUri = (uri: string): string => {
  return uri.match(/(.*)\.md/)?.[1] || uri;
}

/* Image sources are relative to CDN root */
const transformImageUri = (uri: string): string => {
  return uri.startsWith('http') ? uri : benzinConfig.CDN + uri;
}

/* Disable JavaScript in runtime */
export const config = {
  unstable_runtimeJS: false,
};

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const path = _.compact(_.isArray(context.params?.path)
    ? context.params?.path
    : [context.params?.path]
  );

  const originalSource = await benzinConfig.adapter.getMarkdownSource(benzinConfig.CDN, path);
  const sourceWithHooks = await benzinConfig.hooks.preRender(path, originalSource, benzinConfig.adapter, benzinConfig.CDN);

  const emojiFileNames = await benzinConfig.adapter.getEmojiFileNames(benzinConfig.CDN, benzinConfig.paths.emojiRoot);

  return {
    props: {
      markdownSource: sourceWithHooks,
      emojiFileNames,
      path,
    }
  }
}

export const getStaticPaths = async () => {
  const paths = await benzinConfig.adapter.getStaticMarkdownPaths(benzinConfig.CDN);

  return {
    paths,
    fallback: 'blocking',
  }
}

const Page: NextPage = ({ markdownSource, emojiFileNames }: any) => {
  return (
    <>
      <Head>
        <title>{benzinConfig.title}</title>
        <meta name="description" content="TODO" />
        <link rel="icon" href={`${benzinConfig.CDN}${benzinConfig.paths.favicon}`}/>
      </Head>
      <main>
        <ReactMarkdown
          transformLinkUri={transformLinkUri}
          transformImageUri={transformImageUri}
          rehypePlugins={[emojiPlugin(emojiFileNames), rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]]}
          remarkPlugins={[remarkGemoji, remarkGfm]}
          components={{
            emoji: Emoji,
            img: Image,
            code: Code,
            h1: 'h2',
            h2: 'h3',
            h3: 'h4',
            h4: 'h5',
            h5: 'h6',
          } as any}
        >
          {markdownSource}
        </ReactMarkdown>
      </main>
    </>
  );
};

export default Page;
